<template>
  <div class="no-card-water">
    <c-title text="无卡打水"></c-title>
    <p class="facility">设备号：{{device_no}}</p>
    <div class="main">
      <p class="tips">请选择您需要的出水量</p>
      <div class="list">
        <div
          class="item"
          v-for="(item, i) in list"
          @click="choose(item, i)"
          :key="i"
          :class="{ 'choose': current_index == i }"
        >
          <span class=" fw-600 fz-36" >{{item.title}}</span>
          <span class="fz-24 c-7E7E7E">售价{{item.product_price}}</span>
        </div>
      </div>
      <div class="btn">
        <van-button color="#FF695E" block round @click="pay">确认支付</van-button>
        <div class="history" @click="goto">历史记录<span style="margin-left: 0.1563rem;">></span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current_index: 0,
      list:[],
      device_no:""
    };
  },
  activated(){
    console.log(this.$route);
    this.device_no = this.$route.query.device_no ;
    this.getData()
  },
  methods: {
    getData(){
      $http.get("plugin.water-machine.frontend.consumer.no-card-goods.package",{device_no:this.device_no},"").then(res=>{
        if(res.result){
          this.list = res.data.has_many_options;
          console.log(res.data);
        }else{
          this.$toast(res.msg);
        }
      })
    },
    pay(){
      let item = this.list[this.current_index];
      $http.post("order.create",{goods:[{goods_id:item.goods_id,total:1,option_id:item.id}]},"").then(res=>{
        if(res.result){
         this.$router.push(this.fun.getUrl("orderpay",{order_ids: res.data.order_ids,device_no:this.device_no}, {device_no:this.device_no,  api:"plugin.water-machine.frontend.consumer.no-card-goods.index"}));
        }else{
          this.$toast(res.msg);
        }
      })
    },
    goto() {
      this.$router.push(this.fun.getUrl("water_machine_history"));
    },
    choose(item, i) {
      this.current_index = i;
    }
  }
};
</script>

<style scoped lang="scss">
.choose {
  border: 1px solid rgba(255, 105, 94, 1) !important;
  color: #ff695e;
}

.btn {
  margin: 2rem 0.25rem 0;
}

.c-FF695E {
  color: #ff695e;
}

.no-card-water {
  padding: 0 0.75rem 3.125rem;

  .history {
    margin-top: 0.8438rem;
    font-size: 0.8125rem;
    color: #7e7e7e;
  }

  .fw-600 {
    font-weight: 600;
  }

  .main {
    border-radius: 0.625rem;
    padding: 0.6875rem 0.625rem 1.4375rem;
    background: #fff;
  }

  .facility {
    font-size: 0.875rem;
    text-align: left;
    padding: 0.8438rem 0 0.6563rem;
    color: #2c2c2c;
  }

  .list {
    display: grid;
    grid-template-columns: repeat(3, auto);
  }

  .fz-24 {
    font-size: 0.75rem;
  }

  .fz-36 {
    font-size: 1.125rem;
  }

  .c-7E7E7E {
    color: #7e7e7e;
  }

  .item {
    width: 6.4375rem;
    padding: 0.8438rem  0;
    background: #fff;
    border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
    opacity: 1;
    border: 1px solid #ececec;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.625rem;
  }

  .tips {
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
  }
}
</style>
